<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/neighborList.css" />
</head>

<body>
	<div class="loading-warpper" id="loading">
		<div class="loading">
			<div class="item1"></div>
			<div class="item2"></div>
		</div>
	</div>
	<header class="header-fiexd mui-bar">
		<div id="header"></div>
		<div class="header">
			<a class="mui-action-back mui-icon mui-icon mui-icon-arrowleft"></a>
			<h1 class="mui-title" id="title" style="opacity: 0;">小区拼车</h1>
		</div>
	</header>
	<div id="mescroll" class="mescroll">
		<div class="">
			<div id="content"></div>
			<div class="header-title">小区拼车</div>
			<div class="carSharing">
				<div class="list m-t-20" v-if="list.length > 0">
					<div class="item" v-for="item in  list" @click="commentTap(item.carID)">
						<div v-if="item.carType==1" class="item-category">车找人</div>
						<div v-else class="item-category">人找车</div>
						<div class="user">
							<img class="user-icon" :src="item.icon || '../../../images/user/moren.png' ">
							<div class="user-desc">
								<span class="user-name" v-text="item.periNickname || '小区住户'"></span>
								<span class="font-12 font-c-7f">{{item.carType==1? '车主' : '乘客'}}</span>
								<div class="font-14 font-c-7f">发布于{{item.carCD | timeago}}</div>
							</div>
						</div>
						<ul class="desc">
							<li class="son">
								<span>出发时间</span>
								<span v-text="item.carSetoffTime"></span>
							</li>
							<li class="son">
								<span>出发时间</span>
								{{item.carStartLocation}} 到 {{item.carEndLocation}}
							</li>
						</ul>
						<div class="remark m-t-15">
							<img class="remark-icon" src="../images/laba_hei.png">
							<span class="font-14 font-c-41" v-text="item.carRemarks"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="issue" id="issue">
		<div class="issue-iocn">
			<img src="../../../images/neighbor/add.png">
		</div>
	</div>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		var mescroll;
		var title = document.getElementById('title');
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			Util.StatusbarHeight('header');
			Util.StatusbarHeight('content');
			var self = plus.webview.currentWebview();
			var neiID = Util.getState('neiID')
			console.log('小区ID:' + neiID.neiID)
			if (!neiID.neiID) {
				plus.nativeUI.confirm("您尚未完善业主信息，是否去完善？", function (e) {
					if (e.index == 0) {
						perfectUser()
					} else {
						mui.back()
					}
				})
				return
			}

			mescroll = new MeScroll("mescroll", {
				down: {
					auto: false,
					callback: downCallback,
					outOffsetRate: 0.01
				},
				up: {
					callback: upCallback,
					page: {
						num: 0,
						size: 10
					},
					empty: {
						warpId: "mescroll",
						icon: "../../../images/zanwu.png",
						tip: "还没有人发布呢~",
						btntext: "",
						btnClick: null,
						supportTap: false
					},
					htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
					toTop: {
						warpId: "mescroll",
						src: "../../../images/neighbor/br.jpg",
						offset: 400
					},
					onScroll: function (mescroll, y, isUp) {
						var height = 30
						if (y > height) {
							var opacity = y / 140
							opacity = opacity > 1 ? 1 : opacity
							title.style.opacity = opacity
						} else {
							title.style.opacity = 0
						}
					}
				}
			})
		})

		window.addEventListener('issueBack', function (msg) {
			//自定义方法，刷新数据，不刷新页面
			location.reload();
		})
		
		window.addEventListener('perfectUser',function(){
			mui.back()
		})
		
		function perfectUser() {
			mui.openWindow({
				url: '../../../register/perfectUser.html',
				id: 'perfectUser',
				styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
					titleNView: { // 窗口的标题栏控件
						titleText: "完善业主信息", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
						titleSize: "17px", // 字体大小,默认17px
						backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
						autoBackButton: true,
						splitLine: { // 标题栏控件的底部分割线，类似borderBottom
							color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
							height: "1px" // 分割线高度,默认值为"2px"
						}
					}
				},
			})
		}

		var app = new Vue({
			el: "#mescroll",
			data: {
				list: []
			},
			filters: {
				timeago: function (value) {
					return Util.timeago(value)
				}
			},
			methods: {
				commentTap: function (carID) {
					mui.openWindow({
						url: 'details.html',
						id: 'details.html',
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: "详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true
							}
						},
						extras: {
							carID: carID,
						},
						waiting: {
							autoShow: false
						}
					})
				}
			},
		})

		mui("#issue")[0].addEventListener("tap", function () {
			var neiID = Util.getState('neiID')
			console.log(neiID.neiID)
			if (!neiID.neiID) {
				plus.nativeUI.confirm("您尚未完善业主信息，是否去完善？", function (e) {
					if (e.index == 0) {
						perfectUser()
					} else {
						mui.back()
					}
				})
				return
			}
			mui.openWindow({
				url: 'issue.html',
				id: 'issue.html',
				styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
					titleNView: { // 窗口的标题栏控件
						titleText: '拼车发布', // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题        
						backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
						autoBackButton: true,
					}
				},
				waiting: {
					autoShow: false
				}
			})
		})


		function downCallback() {
			mui.post(Util.HTTP + 'api/Carpool/GetCarpool', {
				neiID: Util.getState('neiID').neiID,
				page: 1,
				number: 10
			}, function (res) {
				if (res.code == 1001) {
					mescroll.endSuccess();
					app.list = res.data
				} else {
					mui.toast(res.message)
				}
			})
		}

		function upCallback(page) {
			mui.post(Util.HTTP + 'api/Carpool/GetCarpool', {
				neiID: Util.getState('neiID').neiID,
				page: page.num,
				number: page.size
			}, function (res) {
				if (res.code == 1001) {
					mescroll.endSuccess(res.data.length);
					app.list = app.list.concat(res.data)
					document.getElementById('loading').style.display = 'none'
				} else {
					mui.toast(res.message)
				}
			})
		}
	</script>
</body>

</html>
